<template>
    <div class="permission">
        <el-header>
            <div class="drop-box">
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        权限设置<i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="busInfo">企业信息</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <el-main>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="角色权限" name="role">
                        <div style="text-align: right;">
                            <el-button size="mini" @click="creatNewRole" style="background: #4065E0;color: #fff;width: 108px;height: 32px;border-radius: 4px">+创建新角色</el-button>
                        </div>
                        <div>
                            <el-table
                            :data="roleData"
                            style="width: 100%">
                                <el-table-column
                                    prop="roleName"
                                    label="角色名"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="description"
                                    label="角色说明"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="accountNum"
                                    label="当前账号数">
                                </el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="创建时间">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.roleName === '管理员'">
                                            <el-link :underline="false" @click="handleLook(scope.$index, scope.row)">查看</el-link>
                                        </div>
                                        <div v-else>
                                            <el-link :underline="false" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
                                            <span style="color: #4065E0">|</span>
                                            <el-link :underline="false" @click.native.prevent="handleDelete(scope.$index, roleData)">删除</el-link>
                                        </div>
                                    
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <el-dialog
                            title="创建角色"
                            :visible.sync="creatRole"
                            width="50%"
                            :close-on-click-modal="false"
                            :close-on-press-escape="false"
                            :show-close="false"
                            top="24vh"
                            :modal-append-to-body="false"
                            >
                            <div class="member-form">
                                <el-form ref="newRoleForm" :model="newRoleForm" label-width="80px">
                                    <el-form-item label="角色权限" class="select-role" prop="permission">
                                        <el-radio-group v-model="newRoleForm.permission">
                                            <el-radio label="content">内容运营</el-radio>
                                            <el-radio label="usermanger">用户管理</el-radio>
                                            <el-radio label="data">数据中心</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="角色名称"
                                    prop="roleName"
                                    :rules="[
                                        { required: true, message: '输入角色名称', trigger: 'change' }
                                        ]">
                                            <el-input v-model="newRoleForm.roleName" placeholder="输入角色名称"></el-input>
                                    </el-form-item>
                                    <el-form-item class="member-btn">
                                        <el-button style="margin-right: 58px;background: #4065E0;color: #fff" @click="saveRole('newRoleForm')">保存</el-button>
                                        <el-button @click="creatRole = false">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-dialog>
                    </el-tab-pane>
                    <el-tab-pane label="管理审批" name="approval">
                        <div class="approval-box">
                            <el-table
                                :data="approvalData"
                                style="width: 100%"
                                border>
                                <el-table-column
                                    prop="applicant"
                                    label="申请人"
                                    >
                                </el-table-column>
                                <el-table-column
                                    prop="applicationTime"
                                    label="申请时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="status"
                                    label="审批状态">
                                </el-table-column>
                                <el-table-column
                                    prop="approver"
                                    label="审批人">
                                </el-table-column>
                                <el-table-column
                                    prop="approvalTime"
                                    label="审批时间">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.status === '通过'">
                                            <span style="font-size: 14px">已通过</span>
                                        </div>
                                        <div v-else>
                                            <el-link :underline="false" @click="adopt(scope.$index, scope.row)">通过</el-link>
                                            <span style="color: #4065E0">|</span>
                                            <el-link :underline="false" @click.native.prevent="refuse(scope.$index, scope.row)">拒绝</el-link>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <el-dialog
                            title="角色分配"
                            :visible.sync="assignRole"
                            width="50%"
                            :close-on-click-modal="false"
                            :close-on-press-escape="false"
                            :show-close="false"
                            top="24vh"
                            :modal-append-to-body="false"
                            >
                            <div class="member-form">
                                <el-form ref="assignRoleForm" :model="assignRoleForm" label-width="100px">
                                    <el-form-item label="角色权限" class="select-role" prop="permission">
                                        <el-radio-group v-model="assignRoleForm.permission">
                                            <el-radio label="administrator">管理员</el-radio>
                                            <el-radio label="market">市场</el-radio>
                                            <el-radio label="operate">运营</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="申请人名称">
                                        <el-input :value="assignRoleForm.applicant"></el-input>
                                    </el-form-item>
                                    <el-form-item class="member-btn">
                                        <el-button style="margin-right: 58px;background: #4065E0;color: #fff" @click="saveAssign('assignRoleForm')">保存</el-button>
                                        <el-button @click="assignRole = false">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-dialog>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-header>
    </div>
</template>

<script>
export default {
    name: 'Permission',
    data() {
        return {
            activeName: 'role',
            roleData: [
                { roleName: '管理员', description: '企业账户最高权限拥有者', accountNum: 1, time: '2019-07-29 14:35:34' },
                { roleName: '运营1', description: '市场权限', accountNum: 3, time: '2019-07-29 14:35:34' }
            ],
            creatRole: false,
            newRoleForm: {
                permission: 'content',
                roleName: ''
            },
            approvalData: [
                { applicant: 'AMY', applicationTime: '2019-07-29 14:35:34', status: '未审批', approver: 'ABC', approvalTime: '2019-07-29 14:35:34' },
                { applicant: 'Jiessie', applicationTime: '2019-07-29 14:35:34', status: '通过', approver: 'ABC', approvalTime: '2019-07-29 14:35:34' }
            ],
            assignRole: false,
            assignRoleForm: {
                permission: 'market',
                applicant: ''
            }
        }
    },
    methods: {
        handleCommand(command){
            if(command == 'busInfo'){
                this.$router.push({ name: 'BusinAccount' })
            }
        },
        // 添加新角色
        creatNewRole(){
            this.creatRole = true
        },
        // 查看
        handleLook(index, row){

        },
        // 编辑
        handleEdit(index, row){

        },
        // 删除
        handleDelete(index, rows){
            rows.splice(index, 1);
        },
        // 保存角色
        saveRole(formName){
            this.$refs[formName].validate(valid => {
                if(valid){
                    
                    this.creatRole = false
                    this.$refs[formName].resetFields()
                }else{
                    return false
                }
            })
        },
        // 通过
        adopt(index, row){
            this.assignRole = true
            this.assignRoleForm.applicant = row.applicant
        },
        // 拒绝
        refuse(index, row){

        },
        // 保存角色分配
        saveAssign(formName){
            this.assignRole = false
        }
    }
}
</script>

<style lang="scss" scoped>
.permission{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 30;
    .el-header{
        height: 50px !important;
        line-height: 50px;
    }
}
.approval-box{
    margin-top: 20px;
}
.el-dropdown{
    font-size: 16px;
    font-weight: bold;
    .el-icon-caret-bottom{
        padding-left: 8px;
    }
}
.el-dropdown-menu{
    top: 92px !important;
    padding: 0;
    margin: 0;
    left: 220px !important;
    padding-top: 10px;
    .el-dropdown-menu__item{
        font-size: 14px;
        font-weight: bold;
    }
}
.el-link.el-link--default:hover{
    color: #4065E0;
}
.el-link.el-link--default{
    color: #4065E0;
}
</style>

